<HTML>
<HEAD>	
<link type="text/css" rel="stylesheet" href="/2112PowerWindows/assets/window12.css">
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/core.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/events.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/css.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/coordinates.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/drag.js"></script>

<script language="JavaScript" type="text/javascript">





_2112SnapInPanel_ = function(strName) {
   var m_WindowName = strName ;
   var windowClass = 'window12' ;
   var panelClass  = 'panel12' ;
   var headerClass = 'hd12' ;
   var bodyClass   = 'bd12' ;
   var footerClass = 'ft12' ; 
   var m_iHeaderHeight = 14 ;
   var m_iFooterHeight = 5 ;
   var m_elWindow ;
   var m_elPanel ;
   var m_elBody ;
   var m_elHeader ;
   var m_elFooter ;
   var m_elTitle ;
   var m_DropListener = null ; //there will be only ONE! We do not want to admin a bunch of listeners.
   var m_DragListener = null ;
   var m_UnloadListener = null ;
   var m_iBodyHeight ;
   var m_iHeaderHeight ;
   var m_iFooterHeight ;


   
   elementFactory =  function(theParent, strUniqueName, strClass, iWidth, iHeight)
   {
      var a ;
      var theElement = document.createElement("div");   
         if( null != strUniqueName )
         {
            a = document.createAttribute("id");
            a.nodeValue = strUniqueName ;
            theElement.setAttributeNode(a);
         }
         a = document.createAttribute("class");
         a.nodeValue = strClass ;
         theElement.setAttributeNode(a);

         if( iWidth > 0 )
            theElement.style.width = iWidth + 'px' ;
         if ( iHeight > 0 )
            theElement.style.height = iHeight + 'px';

         
         theParent.appendChild ( theElement );
         return theElement ;
   }

   //the height of the main window
   this.getWindowExtY = function(){      
      return   0 ;
   }

   this.getBodyHeight = function(){
         return 0  ;     
   }

   this.calcBodyHeight = function(iSnapInTargetHeight){ 
      //border = 4
      return 0;
   }

   this.getWindowName = function(){
      return m_WindowName;
   }
   
   this.getWindow = function(){
      return m_elWindow ;
   }
   
   this.getPanel = function(){
      return m_elPanel ;
   }
   
   this.getHeader = function(){
      return m_elHeader ;
   }
   
   this.getBody = function(){
      return m_elBody ;
   }
   
   this.create = function (strTitle, iWidth, iHeight) 
   {         
      var iBorders = 2 ;
      var el ;
      var iBodyHeight = iHeight - m_iHeaderHeight - m_iFooterHeight - iBorders;  //to change         
      m_elWindow = elementFactory(document.body, m_WindowName + '_' + windowClass, windowClass, iWidth, iHeight);                 
      m_elPanel  = elementFactory(m_elWindow, m_WindowName + '_' + panelClass, panelClass, iWidth, iHeight);
      
      m_elHeader = elementFactory(m_elPanel, m_WindowName  + '_' + headerClass, headerClass , 
                           -1, m_iHeaderHeight);
      m_elBody   = elementFactory(m_elPanel, m_WindowName + '_' + bodyClass, bodyClass, -1, iBodyHeight);      
      m_elFooter = elementFactory(m_elPanel, m_WindowName + '_' + footerClass, footerClass, 
                           -1, m_iFooterHeight);    
      
      elementFactory(m_elHeader, null, 'tl' , -1, -1);
      elementFactory(m_elHeader, null, 'tr' , -1, -1);
      
      
      m_elTitle = document.createElement("span");
      m_elTitle.innerHTML = strTitle ;      
      m_elHeader.appendChild ( m_elTitle );
      
      el = document.createElement("a");
      a = document.createAttribute("href");
      a.nodeValue = "#" ;
      a = document.createAttribute("onclick");
      a.nodeValue = 'destroy(' + m_WindowName + ')' ;  //this must be solved
      el.setAttributeNode(a);
      
      a = document.createAttribute("class");
      a.nodeValue = "container-close" ;    //style=\"display:block;\"" ;
      el.setAttributeNode(a);
      m_elHeader.appendChild ( el );      
      return m_elBody ;  
   }
   
   this.destroy = function() 
   {
      document.body.removeChild(m_elWindow) ;
   }
   
   this.unlink = function() 
   {
   
   }

   this.moveTo = function(x, y) 
   {
      //implement this!
      //? use toolman?
      m_elWindow.style["top"] =  y + "px";
		m_elWindow.style["left"] = x + "px";
      m_elPanel.style["top"] =  "0px"
		m_elPanel.style["left"] = "0px"
   }
   
   this.setTitle = function (strTitle)
   {
      m_elTitle.innerHTML = strTitle ;
   }
   
   
   this.setContent = function (theContent)
   {
      if (theContent.tagName) 
      {
         m_elBody.innerHTML = "";
         m_elBody.appendChild(theContent);
      }
      else 
      {
         m_elBody.innerHTML = theContent;
      }
   }
   
   this.setDropListener = function(dropHandler) 
   {
      m_DropListener = dropHandler ;
   }

   this.setDragListener = function(dragHandler) 
   {
      m_DragListener = dragHandler ;
   }

   this.setUnloadListener = function(unloadHandler) 
   {
      m_UnloadListener = unloadHandler ;
   }
   
   this.onDrop = function(arg)
   {
      //the arg object gets translated into some atoms and the Listener is called.
     //thePanelName, x, y
     if( null != m_DropListener ) 
     {
       m_DropListener(m_WindowName, arg.mousePosition.x, arg.mousePosition.y ) ;
     }
   } 
}



PanelFactory2112 = function()
{
   this.create = function (cbDrag, cbDrop, cbUnload, theContent, snapInID, strTitle, 
                        iPreferredWidth, unitW, iPreferredHeight, unitH, bNoBounds, bCanClose) 
   {
      var x = new _2112SnapInPanel_(snapInID) ;
      var drag = ToolMan.drag() ;
      var coordinates = ToolMan.coordinates() ;

//debugger;
      var myBody = x.create( strTitle, iPreferredWidth, iPreferredHeight) ;
      x.setDropListener( cbDrop );
      x.setDragListener( cbDrag );
      x.setUnloadListener( cbUnload );
      x.setContent(theContent) ; 

      //x.setContent('<div align=center><embed src=\"http://www.worldtimeserver.com/clocks/wtsclock001.swf?color=6495ED&wtsid=DE\" width=\"100\" height=\"100\" wmode=\"transparent\" type=\"application/x-shockwave-flash\" /></div>');
      drag.createProxy(x.getWindow(), x.getHeader(), x.onDrop) ;
      return x ;
   }
      
//currently just a shell
  this.show = function(thePanel) 
  {
      //thePanel.show() ;
  }


  

}

cbDrop = function(strName, x, y)
{
   alert(strName) ;
}

cbDrag = function(strName, x, y)
{
   alert(strName) ;
}

destroy = function(thePanel)
{
   alert("destroy") ;
   //thePanel.destroy() ;
}






setContent = function (theElement, theContent)
   {
      if (theContent.tagName) 
      {
         theElement.innerHTML = "";
         theElement.appendChild(theContent);
      }
      else 
      {
         theElement.innerHTML = theContent;
      }
   }
  var x ;
   
f1 = function() 
{
  var IntrinsicObject = new PanelFactory2112();
  var theContent = "Hello World!" ;
  IntrinsicObject.create (cbDrag, cbDrop, null, theContent, 'snapInID', 'Veri SnapIn Dragger', 
                        150, 'px', 150 , 'px', false, true) 
}

f2 = function() 
{
   
}


initToolMan = function()
{
/*
   var group = null;
	var coordinates = ToolMan.coordinates() ;
	var drag = ToolMan.drag() ;
	var boxDrag = document.getElementById("myPanel"); 
	setContent(document.getElementById("myPanel_bd12"), document.getElementById('content1')) ;
	drag.createProxy(boxDrag, document.getElementById("myPanel_hd12"), cbDrop) ;
	boxDrag = document.getElementById("myPanel2"); 
	setContent(document.getElementById("myPanel2_bd12"), '<b>Hello World</b>') ;
	drag.createProxy(boxDrag, boxDrag, cbDrop) ;
	*/
}</script>
	
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>A Panel substitute</TITLE>
</HEAD>
<BODY onload="initToolMan()">
<div class="window12" style="width:400px;height:300px;left:100px;top:30px"> 
  <div id="myPanel" class="panel12" >
      <div id="myPanel_hd12" class= "hd12">         
         <div class="tl"></div>
            <a href="javascript:void(0)" class="container-close" style="display:block;"></a>
            <span>Calendar </span>   
         <div class="tr"></div>  
      </div>       
         <div id="myPanel_bd12" class="bd12" style="height:300px;">            
         </div>
         <div class= "ft12">
            footer
         </div>         
   </div><!-- PANEL12 -->   
</div><!-- WINDOW12 -->


<div class="window12" style="width:400px;height:300px;left:100px;top:200px"> 
  <div id="myPanel2" class="panel12" >
      <div class= "hd12">
         
         <div class="tl"></div>
            <a href="javascript:void(0)" class="container-close" style="display:block;"></a>
            <span>Calendar </span>   
         <div class="tr"></div>  
      </div>       
         <div id="myPanel2_bd12"  class="bd12" style="height:300px;">
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body-end<br>
         </div>
         <div class= "ft12">
            footer
         </div>
         
   </div><!-- PANEL12 -->
   
</div><!-- WINDOW12 -->

<div id="content1">
body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body<br>
            body-end<br>
</div>            
<button id="test" onclick="f1();">1  </button >
<button id="test" onclick="f2();">2  </button >
<div id="proxy1" style="width:50px;height:50px;border:1px;border-style:solid;">Proxy1</div>
<div id="proxy2" style="width:50px;height:50px;border:1px;border-style:solid;">Proxy2</div>

</BODY>
</HTML>
